<template>
    <div class="module-box">
      <div style="flex:0 1 25%">
        <dv-border-box-9 style="width:100%;height:238px;">
          <!-- 横向柱状图 -->
          <!-- <dv-capsule-chart :config="config" style="width:100%;height:238px; margin: 100 10 0 10;" /> -->
        <PieChartVue style="width:100%;height:238px;"></PieChartVue>
        </dv-border-box-9>
      </div>

      <div style="flex:0 1 25%">
        <dv-border-box-9 style="width:100%;height:238px;">
          <!-- <dv-capsule-chart :config="config" style="width:100%;height:238px; margin: 100 10 0 10;" /> -->
        <DonutChartVue></DonutChartVue>
        </dv-border-box-9>
      </div>

      <div style="flex:0 1 25%">
        <dv-border-box-9 style="width:100%;height:238px;">
          <!-- <dv-capsule-chart :config="config" style="width:100%;height:238px; margin: 100 10 0 10;" /> -->
        <RoseChartVue></RoseChartVue>
        </dv-border-box-9>
      </div>

      <div style="flex:0 1 25%">
        <dv-border-box-9 style="width:100%;height:238px;">
          <!-- <dv-capsule-chart :config="config" style="width:100%;height:238px; margin: 100 10 0 10;" /> -->
          <StackLineVue></StackLineVue>
        </dv-border-box-9>
      </div>
    </div>
</template>
<script>
import PieChartVue from '@/charts/PieChart.vue'
import DonutChartVue from '@/charts/DonutChart.vue'
import RoseChartVue from '@/charts/RoseChart.vue'
import StackLineVue from '@/charts/StackLine.vue'

export default {
    name: 'CenterMainVue',
    components: {
      PieChartVue,
      DonutChartVue,
      RoseChartVue,
      StackLineVue
    },
   data() {
      return {
        config:{
data:[
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 67
    },
    {
      name: '漯河',
      value: 123
    },
    {
      name: '郑州',
      value: 55
    },
    {
      name: '西峡',
      value: 98
    }
  ]
    }
      }
   }
}
</script>
<style>

</style>